<style lang="less">
  .ue-module-wrap {
    .el-table {
      flex: 1;
      .el-icon-check {
        display: none;
      }
      .current-row {
        .el-icon-check {
          display: inline-block;
        }
      }
    }
  }
  .ue-dialog-edit {
    .el-dialog__body{
      padding-top: 10px;
    }
    .top_row {
      font-size: 15px;
      padding-bottom: 8px;
    }
    .top_title {
      font-weight: 600;
    }
    .top_content {

    }
  }
</style>
<!--价格保护申请管理-->
<template>
  <el-tabs active-name="first" class="ue-module-wrap" @tab-click="handleClick" type="border-card">
    <el-tab-pane label="待审核" name="first">
      <!--工具条-->
      <search-bar style="height: 90px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单编号">
              <el-input  v-model="searchCondition.conditionName"
                         placeholder="请输入精品线路名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请日期">
              <el-date-picker
                v-model="searchCondition.conditionName"
                type="date"
                align="right"
                placeholder="选择申请日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下单日期">
              <el-date-picker
                v-model="searchCondition.conditionName"
                type="date"
                align="right"
                placeholder="选择下单日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="申请人">
              <el-input  v-model="searchCondition.conditionName"
                         placeholder="请输入申请人名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发货人">
              <el-input  v-model="searchCondition.conditionName"
                         placeholder="请输入发货人名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
          </el-col>
        </el-row>
      </search-bar>
      <!-- 操作 -->
      <el-col :span="24" style="margin-bottom: 10px">
        <el-button type="primary" @click="dialogOpen">审核确认
        </el-button>
        <el-button type="primary" @click="specalTraceRester" style="float: right">重置</el-button>
        <el-button type="primary" @click="searchSpecialTrace" style="float: right">查询</el-button>
        <el-button type="primary" @click="searchSpecialTrace" style="float: right" disabled="true">导出</el-button>
      </el-col>
      <!-- 表格-->
      <el-table highlight-current-row border
                :data="tableData"
                v-loading="listLoading"
                @current-change="handleCurrentChange"
                height="100%"
                style="width: 100%;">
        <el-table-column label="选中" width="50" align="center">
          <template slot-scope="scope">
            <i class="el-icon-check"></i>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="申请日期" width="120">
        </el-table-column>
        <el-table-column show-overflow-tooltip fit prop="name" label="订单编号" width="150" align="center">
          <template slot-scope="scope">
            <a style="cursor: pointer;text-decoration:underline;color: #20a0ff"
              >{{ scope.row.name}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="下单日期" width="120">
        </el-table-column>
        <el-table-column prop="name" label="申请人" width="100">
        </el-table-column>
        <el-table-column prop="name" label="申请价格差额" width="100">
        </el-table-column>
        <el-table-column prop="name" label="发货人" width="80">
        </el-table-column>
        <el-table-column prop="name" label="货物信息" width="200" :formatter="formatterTrunkTasks">
        </el-table-column>
        <el-table-column prop="name" label="重量" width="80">
        </el-table-column>
        <el-table-column prop="name" label="体积" width="80">
        </el-table-column>
        <el-table-column prop="name" label="订单金额" width="80">
        </el-table-column>
        <el-table-column prop="name" label="付款方式" width="80">
        </el-table-column>
        <el-table-column prop="name" label="标准价格编号" width="80">
        </el-table-column>
        <el-table-column prop="name" label="应用单价" width="80">
        </el-table-column>
        <el-table-column prop="name" label="签收日期" width="120">
        </el-table-column>
        <el-table-column prop="status" label="订单状态" width="80">
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          @size-change="handlePageSizeChange"
          @current-change="handleCurrentPageChange"
          layout="total,sizes,prev, pager, next, jumper"
          :total="total" style="float: right">
        </el-pagination>
      </el-col>
    </el-tab-pane>
    <el-tab-pane label="已审核" name="second">
      <!--工具条-->
      <search-bar style="height: 90px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单编号">
              <el-input  v-model="searchCondition.conditionName"
                         placeholder="请输入精品线路名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请日期">
              <el-date-picker
                v-model="searchCondition.conditionName"
                type="date"
                align="right"
                placeholder="选择申请日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下单日期">
              <el-date-picker
                v-model="searchCondition.conditionName"
                type="date"
                align="right"
                placeholder="选择下单日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="申请人">
              <el-input  v-model="searchCondition.conditionName"
                         placeholder="请输入申请人名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发货人">
              <el-input  v-model="searchCondition.conditionName"
                         placeholder="请输入发货人名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="划账状态">
              <el-select  v-model="searchCondition.conditionName" placeholder="请选择划账状态">
                <el-option v-for="item in $store.getters.VEHICLE_PROPERTY"
                           :key="item.dictVal"
                           :label="item.cnDictValname"
                           :value="item.dictVal"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </search-bar>
      <!-- 操作 -->
      <el-col :span="24" style="margin-bottom: 10px">
        <el-button type="primary" @click="inputTracking" disabled="true">划账确认</el-button>
        <el-button type="primary" @click="dialogOpenView">审核详情</el-button>
        <el-button type="primary" @click="specalTraceRester" style="float: right">重置</el-button>
        <el-button type="primary" @click="searchSpecialTrace" style="float: right">查询</el-button>
        <el-button type="primary" @click="searchSpecialTrace" style="float: right" disabled="true">导出</el-button>
      </el-col>
      <!-- 表格-->
      <el-table highlight-current-row border
                :data="tableDataB"
                v-loading="listLoadingB"
                @current-change="handleCurrentChangeB"
                height="100%"
                style="width: 100%;">
        <el-table-column label="选中" width="50" align="center">
          <template slot-scope="scope">
            <i class="el-icon-check"></i>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="申请日期" width="120">
        </el-table-column>
        <el-table-column show-overflow-tooltip fit prop="name" label="订单编号" width="150" align="center">
          <template slot-scope="scope">
            <a style="cursor: pointer;text-decoration:underline;color: #20a0ff"
              >{{ scope.row.name}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="下单日期" width="120">
        </el-table-column>
        <el-table-column prop="name" label="申请人" width="100">
        </el-table-column>
        <el-table-column prop="name" label="申请价格差额" width="100">
        </el-table-column>
        <el-table-column prop="name" label="审核状态" width="100">
        </el-table-column>
        <el-table-column prop="name" label="确认价格差额" width="100">
        </el-table-column>
        <el-table-column prop="name" label="划账状态" width="100">
        </el-table-column>
        <el-table-column prop="name" label="发货人" width="80">
        </el-table-column>
        <el-table-column prop="name" label="货物信息" width="200" :formatter="formatterTrunkTasks">
        </el-table-column>
        <el-table-column prop="name" label="重量" width="80">
        </el-table-column>
        <el-table-column prop="name" label="体积" width="80">
        </el-table-column>
        <el-table-column prop="name" label="订单金额" width="80">
        </el-table-column>
        <el-table-column prop="name" label="付款方式" width="80">
        </el-table-column>
        <el-table-column prop="name" label="标准价格编号" width="80">
        </el-table-column>
        <el-table-column prop="name" label="应用单价" width="80">
        </el-table-column>
        <el-table-column prop="name" label="签收日期" width="120">
        </el-table-column>
        <el-table-column prop="name" label="订单状态" width="80">
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar">
        <el-pagination
          :current-page="currentPageB"
          :page-size="pageSizeB"
          @size-change="handlePageSizeChangeB"
          @current-change="handleCurrentPageChangeB"
          layout="total,sizes,prev, pager, next, jumper"
          :total="totalB" style="float: right">
        </el-pagination>
      </el-col>
    </el-tab-pane>
    <!--审核确认-->
    <el-dialog :title="dialogTitle" width="60%" :visible.sync="dialogVisible" :close-on-click-modal="false"  @close="resetInfoForm" class="ue-dialog-edit">
      <el-row class="top_row">
        <el-col :span="6">
          <label class="top_title">订单号：</label>
          <label class="top_content">{{objInfo.orderNumber}}</label>
        </el-col>
        <el-col :span="6">
          <label class="top_title">申请人：</label>
          <label>{{objInfo.proposer}}</label>
        </el-col>
        <el-col :span="6">
          <label class="top_title">申请人手机：</label>
          <label>{{objInfo.contactPhone}}</label>
        </el-col>
        <el-col :span="6">
          <label class="top_title">发货人：</label>
          <label>{{objInfo.shipmentsContactName}}</label>
        </el-col>
      </el-row>
      <el-row class="top_row">
        <el-col :span="12">
          <label class="top_title">始发地：</label>
          <label>{{objInfo.shipmentsRegion}}</label>
        </el-col>
        <el-col :span="12">
          <label class="top_title">目的地：</label>
          <label>{{objInfo.sendRegion}}</label>
        </el-col>
      </el-row>
      <el-row class="top_row">
        <el-col :span="24">
          <label class="top_title">订单干线运费：</label>
          <label style="color: red">{{objInfo.trunkPrice}} 元</label>
        </el-col>
      </el-row>
      <el-row class="top_row">
        <el-col :span="24">
          <label class="top_title">原价：</label>
          <label>{{objInfo.originalPrice}}</label>
        </el-col>
      </el-row>
      <el-row class="top_row">
        <el-col :span="24">
          <label class="top_title">申请价格差异金额(元)：</label>
          <label style="color: red">{{objInfo.applyMoney}} 元</label>
        </el-col>
      </el-row>
      <el-row class="top_row" style="border-bottom: 1px solid lavender">
        <el-col :span="24">
          <label class="top_title">申请价格差异理由描述：</label>
          <label>{{objInfo.applyRemark}}</label>
        </el-col>
      </el-row>
      <el-form style="margin-top: 10px" :key="dialogKey" :model="objInfo" label-position="left" :rules="objInfoRules" label-width="120px" ref="objInfo" border>
        <el-row>
          <el-col :span="24">
            <el-form-item label="审核结果:" prop="auditStatus">
              <el-radio-group v-model="objInfo.auditStatus">
                <el-radio label="1">线上品牌商赞助</el-radio>
                <el-radio label="2">线下场地免费</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="协商补偿金额:" prop="affirmMoney">
              <el-input type="number" v-model="objInfo.affirmMoney" placeholder="请输入协商补偿金额" :disabled="isView"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="审核结果描述" prop="auditRemark">
              <el-input type="textarea" :rows="4" v-model="objInfo.auditRemark" placeholder="请输入审核结果描述" :disabled="isView"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button @click.native="resetInfoForm">关闭</el-button>
            <el-button type="primary" @click.native="handleSubmit" :loading="submitLoading"  :disabled="isDisabled">保存</el-button>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item>
            <label>注：运价文件明细查询详见 标准价格：BZ20170914085413</label>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>
    <!--审核详情-->
    <el-dialog :title="dialogTitleView" width="60%" :visible.sync="dialogVisibleView" :close-on-click-modal="false" class="ue-dialog-edit">
      <el-row class="top_row">
        <el-col :span="6">
          <label class="top_title">订单号：</label>
          <label class="top_content">{{objInfoView.orderNumber}}</label>
        </el-col>
        <el-col :span="6">
          <label class="top_title">申请人：</label>
          <label>{{objInfoView.proposer}}</label>
        </el-col>
        <el-col :span="6">
          <label class="top_title">申请人手机：</label>
          <label>{{objInfoView.contactPhone}}</label>
        </el-col>
        <el-col :span="6">
          <label class="top_title">发货人：</label>
          <label>{{objInfoView.shipmentsContactName}}</label>
        </el-col>
      </el-row>
      <el-row class="top_row">
        <el-col :span="12">
          <label class="top_title">始发地：</label>
          <label>{{objInfoView.shipmentsRegion}}</label>
        </el-col>
        <el-col :span="12">
          <label class="top_title">目的地：</label>
          <label>{{objInfoView.sendRegion}}</label>
        </el-col>
      </el-row>
      <el-row class="top_row">
        <el-col :span="24">
          <label class="top_title">订单干线运费：</label>
          <label style="color: red">{{objInfoView.trunkPrice}} 元</label>
        </el-col>
      </el-row>
      <el-row class="top_row">
        <el-col :span="24">
          <label class="top_title">原价：</label>
          <label>{{objInfoView.originalPrice}}</label>
        </el-col>
      </el-row>
      <el-row class="top_row">
        <el-col :span="24">
          <label class="top_title">申请价格差异金额(元)：</label>
          <label style="color: red">{{objInfoView.applyMoney}} 元</label>
        </el-col>
      </el-row>
      <el-row class="top_row" style="border-bottom: 1px solid lavender">
        <el-col :span="24">
          <label class="top_title">申请价格差异理由描述：</label>
          <label>{{objInfoView.applyRemark}}</label>
        </el-col>
      </el-row>
      <el-row class="top_row">
        <el-col :span="24">
          <label class="top_title">划账方式：</label>
          <label>转入银行卡</label>
        </el-col>
      </el-row>
      <el-row class="top_row">
        <el-col :span="24">
          <label class="top_title">转账银行：</label>
          <label>中国银行厦门支行</label>
        </el-col>
      </el-row>
      <el-row class="top_row">
        <el-col :span="24">
          <label class="top_title">银行卡号：</label>
          <label>6898258554455544444</label>
        </el-col>
      </el-row>
      <el-row class="top_row" style="border-bottom: 1px solid lavender">
        <el-col :span="24">
          <label class="top_title">账户名称：</label>
          <label>李明依</label>
        </el-col>
      </el-row>
      <el-form style="margin-top: 10px" :model="objInfoView" label-position="left" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="审核结果:">
              <label>{{objInfoView.auditStatus}}</label>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="协商补偿金额:">
              <label style="color: red">{{objInfoView.affirmMoney}} 元</label>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="审核结果描述" prop="auditRemark">
              <label>{{objInfoView.auditRemark}}</label>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item>
            <label>注：运价文件明细查询详见 标准价格：BZ20170914085413</label>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>
  </el-tabs>
  <!--划账确认-->
</template>

<script>
import { pageLoadingListContentTracks } from '../../../api/stowage/LoadingList';
import {objToFilter, resetObjNull} from '../../../lib/util';
export default {
  data () {
    return {
      // --------待审核----
      searchCondition: {
        'conditionName': null
      },
      sels: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      sortProp: null,
      sortOrder: 'ascending',
      listLoading: false,
      tableData: [
        {name: 'wwcs', status: 111111},
        {name: 'wwcs', status: 111111},
        {name: 'wwcs', status: 111111},
        {name: 'wwcs', status: 111111},
        {name: 'wwcs', status: 222222},
        {name: 'wwcs', status: 222222}
      ],
      // --------已审核----
      isFirstChangeTabPane: true,
      searchConditionB: {
        'conditionName': null
      },
      selsB: [],
      totalB: 0,
      currentPageB: 1,
      pageSizeB: 10,
      sortPropB: null,
      sortOrderB: 'ascending',
      listLoadingB: false,
      tableDataB: [
        {name: 'wwcs', status: 111111},
        {name: 'wwcs', status: 111111},
        {name: 'wwcs', status: 111111},
        {name: 'wwcs', status: 111111},
        {name: 'wwcs', status: 222222},
        {name: 'wwcs', status: 222222}
      ],
      // 弹窗1-审核确认
      isDisabled: false,
      dialogVisible: false,
      submitLoading: false,
      dialogTitle: '价格保护申请审核',
      dialogKey: 0,
      objInfo: {
        'id': null,
        'orderNumber': 1510983386190,
        'proposer': '王明一',
        'contactPhone': '15205923525',
        'shipmentsContactName': '王明一',
        'shipmentsRegion': '福建省厦门市思明区',
        'sendRegion': '云南省昆明市官渡区',
        'trunkPrice': 345,
        'originalPrice': '400.00元（单价400.00元/吨×1吨，线路优惠+提前下单优惠 55.00元）',
        'applyMoney': 123,
        'applyRemark': '超过保证时效2天',
        'auditStatus': null,
        'affirmMoney': 123,
        'auditRemark': '超过保证时效2天,确认无误'
      },
      objInfoRules: {
        routeName: [
          {required: true, message: '请输入精品线路名称', trigger: 'blur'}
        ],
        auditStatus: [
          {required: true, message: '请选择审核结果'}
        ],
        affirmMoney: [
          {required: true, message: '请输入协商补偿金额'}
        ],
        auditRemark: [
          {required: true, message: '请输入审核结果描述'}
        ]
      },
      // 弹窗2-审核详情
      dialogVisibleView: false,
      dialogTitleView: '价格保护申请审核详情',
      objInfoView: {
        'id': null,
        'orderNumber': 1510983386190,
        'proposer': '王明一',
        'contactPhone': '15205923525',
        'shipmentsContactName': '王明一',
        'shipmentsRegion': '福建省厦门市思明区',
        'sendRegion': '云南省昆明市官渡区',
        'trunkPrice': 345,
        'originalPrice': '400.00元（单价400.00元/吨×1吨，线路优惠+提前下单优惠 55.00元）',
        'applyMoney': 123,
        'applyRemark': '超过保证时效2天',
        'auditStatus': 222,
        'affirmMoney': 123,
        'auditRemark': '超过保证时效2天,确认无误'
      }
      // 弹窗3-划账确认
    };
  },
  methods: {
    // tab标签切换
    handleClick (tab, event) {
      if (tab.name === 'second' && this.isFirstChangeTabPane) {
        this.isFirstChangeTabPane = false;
        this.searchHistorySpecialTrace();
      }
    },
    // 打开审核确认弹窗
    dialogOpen () {
      this.dialogVisible = true;
    },
    // 打开划账确认弹窗
    // 打开审核详情
    dialogOpenView () {
      this.dialogVisibleView = true;
    },
    // ------待审核---------
    // 多选操作
    selsChange (sels) {
      this.sels = sels;
    },
    // 排序操作
    sortChange (o) {
      this.sortProp = o.prop;
      this.sortOrder = o.order;
      this.searchTableList();
    },
    // 每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.searchTableList();
    },
    // 第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.searchTableList();
    },
    // 重置查询条件
    resetSearchCondition () {
      resetObjNull(this.searchCondition);
    },
    // 查询列表执行
    loadingLists (filter = '') {
      this.listLoading = true;
      pageLoadingListContentTracks({
        filters: filter,
        size: this.pageSize,
        page: this.currentPage,
        sorts: (this.sortProp === null ? '' : (this.sortOrder === 'ascending' ? '-' : '+') + this.sortProp)
      }).then(res => {
        if (res.data.successFlg) {
          this.tableData = res.data.detailModelList;
          this.currentPage = res.data.currPage;
          this.total = res.data.totalCount;
          this.pageSize = res.data.pageSize;
        };
        this.listLoading = false;
      });
    },
    // 查询调用
    searchTableList () {
      let filters = objToFilter(this.searchCondition);
      this.loadingLists(filters);
    },
    // 根据ID获取精品线路信息
    getInfoById (id) {
    },
    // ------已审核---------
    // 多选操作
    selsChangeB (sels) {
      this.selsB = sels;
    },
    // 排序操作
    sortChangeB (o) {
      this.sortPropB = o.prop;
      this.sortOrderB = o.order;
      this.searchTableListB();
    },
    // 每页几条操作
    handleSizeChangeB (val) {
      this.pageSizeB = val;
      this.searchTableListB();
    },
    // 第几页操作
    handleCurrentChangeB (val) {
      this.currentPageB = val;
      this.searchTableListB();
    },
    // 重置查询条件
    resetSearchConditionB () {
      resetObjNull(this.searchConditionB);
    },
    // 查询列表执行
    loadingListsB (filter = '') {
      this.listLoadingB = true;
      pageLoadingListContentTracks({
        filters: filter,
        size: this.pageSizeB,
        page: this.currentPageB,
        sorts: (this.sortPropB === null ? '' : (this.sortOrderB === 'ascending' ? '-' : '+') + this.sortPropB)
      }).then(res => {
        if (res.data.successFlg) {
          this.tableDataB = res.data.detailModelList;
          this.currentPageB = res.data.currPage;
          this.totalB = res.data.totalCount;
          this.pageSizeB = res.data.pageSize;
        };
        this.listLoadingB = false;
      });
    },
    // 查询调用
    searchTableListB () {
      let filters = objToFilter(this.searchConditionB);
      this.loadingListsB(filters);
    },
    // 根据ID获取精品线路信息
    getInfoByIdB (id) {
    },
    // ------------审核确认弹窗------------
    // 重置审核确认弹窗
    resetInfoForm () {
      this.dialogVisible = false;
      this.dialogKey = Math.random() - 0.5;
      for (let p in this.objInfo) {
        if (this.objInfo[p] instanceof Array) {
          this.objInfo[p] = [];
        } else {
          this.objInfo[p] = null;
        }
      }
    },
    // 提交审核确认
    handleSubmit () {

    }
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill;
    }
  },
  mounted () {
    this.$store.commit('initDict');
    this.searchSpecialTrace();
    // this.searchHistorySpecialTrace();
  }
};
</script>
